<template>
  <el-dialog :title="isCollaborator ? '请选择协同人' : '请选择负责人'" :visible.sync="visible" :width="dialogWidth"
             :before-close="handleClose">
    <div class="body">
      <div style="overflow: hidden">
        <el-input ref="inputRef" v-model="input" @input="onSearch" placeholder="请输入" clearable
                  style="width: 97%;margin-top: 15px"></el-input>
        <el-tabs v-show="!input" v-model="activeName">
          <el-tab-pane label="部门" name="abm">
            <Department ref="department" @selectUser="selectUser" @selectCollaborator="selectCollaborator"
                        @cancelUser="cancelUser" :isCollaborator="isCollaborator" @selectchange="onSelectChange"/>
          </el-tab-pane>
        </el-tabs>
        <div v-show="input" class="users-box" v-loading="loading">
          <span class="title">成员</span>
          <div class="content">
            <div v-show="usersList.length>0" class="user-dept" v-for="item in usersList" :key="item.id">
              <el-checkbox-group v-model="selectedList" v-if="isCollaborator" @change="onSelectChange">
                <el-checkbox :label="item.id+'-'+item.realname">
                  <img src="@/assets/user_header.png" alt="">
                  <div class="user-dept-name">{{ item.realname }}</div>
                </el-checkbox>
              </el-checkbox-group>
              <div v-if="!isCollaborator" class="dept-radio" @click="changeUser(item)">
                <img src="@/assets/user_header.png" alt="">
                <div class="user-dept-name">{{ item.realname }}</div>
              </div>
            </div>
            <div v-show="usersList.length == 0" style="height: 100%;">
              <el-empty description="暂无数据"></el-empty>
            </div>
          </div>
        </div>
      </div>
      <div v-if="isCollaborator" class="selected-list">
        <div>
          <div class="selected_title"><span>已选择</span><span @click="selectedList = []">清空</span></div>
          <div class="selected_count"> {{ selectedList.length }}个成员</div>
          <el-select ref="selectRef" v-model="selectedList" multiple style="width: 100%;" placeholder=""
                     @visible-change="onDefaultChange">
            <el-option v-for="item in selectedList" :key="item" :value="item" :label="item.split('-')[1]"></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" @click="$refs.department.submit()">确认</el-button>
          <el-button @click="$refs.department.cancel()">取消</el-button>
        </div>

      </div>
    </div>
  </el-dialog>
</template>

<script>
import Department from './components/department.vue'

export default {
  name: "Appoint",
  components: {
    Department
  },
  props: [
    'value'
  ],
  data() {
    return {
      activeName: "abm",
      visible: false,
      isCollaborator: false,
      input: '',
      usersList: [],
      loading: false,
      dialogWidth: '750px',
      selectedList: []
    }
  },
  watch: {
    visible(current) {
      if (current) {
        this.$nextTick(() => {
          this.$refs.inputRef.focus()
        })
      }

      if (this.value?.length >= 0){
        this.selectedList.splice(0, this.selectedList.length - this.value.length)
      }
      if (this.isCollaborator) {
        this.dialogWidth = '885px'
      } else {
        this.dialogWidth = '750px'
      }
    },
    selectedList(current) {
      this.$nextTick(()=>{
        this.$refs.department.checkList = current
      })
    },
  },

  methods: {
    onSearch(val) {
      if (val.trim()) {
        this.input = val.trim()
        this.loading = true
        this.$http.get(`/user/index`, {
          params: {
            realname: val.trim()
          }
        }).then(res => {
          if (res.data.code == 0)
            this.usersList = res.data.data
          this.loading = false
        })
      }
    },
    changeUser(value) {
      this.$emit('certainUser', value)
    },
    selectUser(user) {
      this.$emit('certainUser', user)
    },
    selectCollaborator(Collaborator) {
      this.input = '';
      this.$emit('certainCollaborator', Collaborator)
    },
    cancelUser() {
      this.input = ''
      this.visible = false;
    },
    handleClose() {
      this.$refs.department.checkList = []
      this.selectedList = []
      this.input = ''
      this.visible = false
    },
    onSelectChange(val) {
      this.selectedList = val
    },
    onDefaultChange() {
      this.$refs.selectRef.blur()
    }
  },
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}

.body {
  width: 100%;
  display: flex;

  > div:nth-child(1) {
    flex: 1;

    .users-box {
      height: 390px;

      .title {
        display: inline-block;
        margin: 12px 0 2px;
        color: gray;
      }

      .content {height: 340px;
        overflow: auto;

        .user-dept {
          margin: 10px 0 0 0px;
          cursor: pointer;

          //.el-checkbox, .el-checkbox__label, .dept-radio {
          .el-checkbox {
            display: flex;
            align-items: center;

            ::v-deep .el-checkbox__label {
              display: flex;
              align-items: center;
            }

          }

          img {
            width: 36px;
            height: 36px;
          }

          .user-dept-name {
            margin-left: 5px;
          }

        }
      }
    }
  }

  .selected-list {
    padding: 0 10px;
    width: 215px;
    border-left: 1px solid rgb(0 0 0 / .1);
    overflow: auto;
    box-sizing: border-box;

    > div:nth-child(1) {
      height: calc(100% - 60px);
    }

    > div:nth-child(2) {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
    }

    .selected_title {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      > span:nth-child(1) {
        font-weight: bold;
        color: #1a1a1a;
      }

      > span:nth-child(2) {
        font-weight: bold;
        font-size: 12px;
        color: #8c8c8c;
        cursor: pointer;
      }
    }

    .selected_count {
      font-size: 12px;
      margin: 10px 0 15px;
      color: #8c8c8c;
    }

    ::v-deep .el-input__inner {
      border: none;
      pointer-events: none;

    }

    ::v-deep .el-input__suffix {
      display: none;
      pointer-events: none;
    }

    ::v-deep .el-select .el-tag {
      margin: 2px 0 2px 10px;
    }


    ::v-deep .el-scrollbar {
      display: none;
    }
  }
}

</style>
